<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="cvs" width="600" height="600"></canvas>
	</body>
	
	<script type="text/javascript">
		
		window.onload = function(){
			// 获取画板
			let cvs = document.querySelector('#cvs')
			//检测画笔是否支持
			if(!cvs.getContext) {
				console.log('浏览器版本过旧')
				return 0
			}
			//创建绘制对象 2D
			let ctx = cvs.getContext('2d')
			
			//开始点
			//横，纵 坐标
			ctx.moveTo(100,100)
			//下一个点的坐标
			ctx.lineTo(200,200)
			ctx.lineTo(200,300)
			ctx.lineTo(140,220)
			ctx.lineTo(350,130)
			
			//绘制
			ctx.stroke()
			
		}
		
		
	</script>
	
	<style type="text/css">
		body{
			background-color: darkseagreen;
			margin: 0;
			padding: 0;
		}
		/* 让canvas更有辨识度 */
		#cvs {
			border: 1px #F08080 solid;
			background-color: pink;
		}
	</style>
</html>
